<template>
  <el-dialog title="添加权限" :visible.sync="disVisible" @close="closeForm"
             :close-on-click-modal="true">
    <el-form :model="urlPermission" :rules="rules" ref="addForm" label-width="100px">
      <el-form-item label="权限名称" prop="name">
        <el-input v-model="urlPermission.name" clearable></el-input>
      </el-form-item>

      <el-form-item label="权限URL" prop="url">
        <el-input v-model="urlPermission.url" clearable></el-input>
      </el-form-item>

      <el-form-item label="权限类型" prop="urlType">
        <el-select v-model="urlPermission.urlType" placeholder="请选择权限类型">
          <el-option label="菜单权限" :value="1"></el-option>
          <el-option label="接口权限" :value="-1"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="父菜单" prop="urlType">
        <el-select v-model="urlPermission.parentId" placeholder="请选择父菜单">
          <el-option label="一级菜单" :value="-1"></el-option>
          <el-option v-for="p in parentMenus" :label="p.name" :value="p.id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm">添加</el-button>
        <el-button @click="closeForm">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
export default {
  name: "AddPermissions",
  props: {
    formVisible: Boolean
  },
  data() {
    return {
      disVisible: this.formVisible,
      urlPermission: {
        urlType: '',
        name:'',
        url:'',
        parentId:''
      },
      rules: {
        name: [{required: true, message: "名称不能为空", trigger: "blur"}],
        urlType: [{required: true, message: "请选择菜单类型", trigger: "change"}],
        parentId: [{required: true, message: "请选择父菜单", trigger: "change"}],
        url: [{required: false, message: "url不能为空", trigger: "blur"}]
      },
      parentMenus: []
    }
  },
  methods: {
    initParentMenus() {
      this.$axios.get("/urlPermission/selectList").then(response => {
        let responseData = response.data;
        if (responseData.code == 200) {
          this.parentMenus = responseData.data;
        }
      })
    },
    submitForm() {
      if (this.urlPermission.urlType === -1) {
        this.rules.url[0].required = true;
      }else {
        this.rules.url[0].required = false;
      }
      this.$refs.addForm.validate(isValid => {
        if (!isValid) {
          this.$message({
            message: "请正确填写表单",
            type: "error",
            duration: 2000
          })
          return;
        }
        this.$axios.postForm("/urlPermission/addPermission", this.urlPermission)
            .then(response => {
              let responseData = response.data;
              if (responseData.code == 200) {
                this.$message({
                  message: "添加成功",
                  type: "success",
                  duration: 2000
                })
                this.$emit("update:addFormVisible", false);
                this.$emit('roleList');
                this.rules.url[0].required = false;
                this.$refs.addForm.resetFields();
              }
            })
      })
    },
    closeForm() {
      this.$emit('update:addFormVisible', false);
      this.$refs.addForm.resetFields();
    },

  },
  created() {
    this.initParentMenus();
  },
  watch: {
    formVisible(val) {
      this.disVisible = val
    }
  }
}
</script>

<style scoped>

</style>